<template>
  <div class="reg-containet">
    <!-- //注册的盒子 -->
    <div class="reg-box">
      <!-- 注册表单区域 -->
      <div class="btu-box2">
        <div class="title">注册页面</div>
        <el-form label-position="right" ref="ruleFormRef" label-width="70px" status-icon :model="userData" style="max-width: 460px" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="userData.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input type="password" v-model.trim="userData.passWord" />
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword">
            <el-input type="password" v-model.trim="userData.rePassword" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.trim="userData.phone" />
          </el-form-item>
          <el-form-item>
            <el-button class="btn-login" type="primary" @click="onSubmit(ruleFormRef)">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { register } from '@/api/index.js'
const userData = reactive({
  userName: '',
  passWord: '',
  rePassword: '',
  phone: ''
})
//用户名密码正则，4到16位（字母，数字，下划线，减号）
const uPattern = /^[a-zA-Z0-9_-]{4,16}$/
const validateUserName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('用户名不能为空！'))
  } else if (!uPattern.test(value)) {
    return callback(new Error('必须为4到16位(字母,数字,下划线,减号!)'))
  } else {
    callback()
  }
}
const validatePassWord = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空！'))
  } else if (!uPattern.test(value)) {
    return callback(new Error('必须为4到16位(字母,数字,下划线,减号!)'))
  } else {
    callback()
  }
}
const validateRePassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空！'))
  } else if (value !== userData.passWord) {
    return callback(new Error('密码不一致！'))
  } else {
    callback()
  }
}
const vaidatePhone = (rule, value, callback) => {
  const phonePattern = /^1[3|4|5|7|8][0-9]{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空！'))
  } else if (!phonePattern.test(value)) {
    return callback(new Error('手机号格式不正确!'))
  } else {
    callback()
  }
}

const rules = reactive({
  userName: [{ validator: validateUserName, trigger: 'blur' }],
  passWord: [{ validator: validatePassWord, trigger: 'blur' }],
  rePassword: [{ validator: validateRePassword, trigger: 'blur' }],
  phone: [{ validator: vaidatePhone, trigger: 'blur' }]
})
const roter = useRouter()
const ruleFormRef = ref()
const { proxy } = getCurrentInstance()
// 登录
const onSubmit = ruleFormRef => {
  if (!ruleFormRef) return
  ruleFormRef.validate(valid => {
    if (valid) {
      // 注册接口方法体
      const { userName, passWord, phone } = userData
      register(userName, passWord, phone).then(res => {
        if (res.data) {
          proxy.$Message({
            message: '注册成功',
            type: 'success'
          })
          roter.push('/login')
        } else {
          proxy.$Message.error(res.msg)
        }
      })
    } else {
      return false
    }
  })
}
</script>
<style lang="less" scoped>
.reg-containet {
  background: url('@/assets/img/regist.jpg') center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .reg-box {
    width: 400px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.192);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;

    .btu-box2 {
      margin: 0 30px;
      /deep/.el-form-item__label {
        color: white;
      }
      /deep/.el-input__wrapper {
        background-color: rgba(0, 0, 0, 0.292) !important;
        box-shadow: transparent;
      }
      /deep/.el-input__inner {
        color: white;
      }
      .btn-login {
        width: 100%;
        // background-color: rgba(0, 0, 0, 0.292) !important;
        // border: transparent;
      }
      .title {
        text-align: center;
        color: white;
        font-size: 24px;
        padding: 15px 0;
      }
    }
  }
}
</style>